<!--
 * @Author: your name
 * @Date: 2022-03-24 10:57:10
 * @LastEditTime: 2022-03-24 14:32:26
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \report_form_h5\src\views\test\index.vue
-->
<template>
  <div class="Test">
    <div class="foot">
      <div class="bar">1111</div>
      <div class="hidden">222</div>
    </div>

    <div class="box">
      <div class="img"></div>
      <div class="content"></div>
    </div>
    <div class="card">
      <div class="item1 item">box1</div>
      <div class="item2 item">box2</div>
    </div>
    <div class="card2">
      <div class="card2_box">
        <div class="item1 item">
          Ownership<br />
          Celebrate your successes, but also own<br />
          the failures, learn from your mistakes,<br />
          and make everything better.
        </div>
        <div class="item2 item">222222222222</div>
      </div>
    </div>

    <div class="layout">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Test",
};
</script>

<style lang="less" scoped>
.Test {
  .foot {
    transform-style: preserve-3d;
    .bar,
    .hidden {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
    }
    .bar {
      background-color: aliceblue;
      position: absolute;
      transition: transform 0.5s;
    }
    .hidden {
      background-color: aqua;
      opacity: 0;
    }
    &:hover {
      .bar {
        transform: rotateY(90deg);
      }
      .hidden {
        transition-delay: 0.5s;
        opacity: 1;
      }
    }
  }

  .box {
    margin-top: 20px;
    width: 200px;
    position: relative;
    height: 500px;
    .img {
      height: 100px;
      transition: height 0.5s;
      background: url(https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1994409170.jpg?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00)
        center;
      background-size: contain;
    }
    .content {
      background-color: aquamarine;
      height: 300px;
      position: absolute;
      top: 100px;
      width: 200px;
      transition: top 0.5s;
    }
    &:hover {
      .img {
        height: 120px;
      }
      .content {
        top: 80px;
      }
    }
  }
  .card {
    transform-style: preserve-3d;
    .item {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      text-align: center;
      line-height: 100px;
    }
    .item1 {
      background-color: aliceblue;
      transform: rotateY(-180deg);
      transition: transform 0.75s, opacity 0.75s;
      opacity: 0;
    }
    .item2 {
      background-color: aqua;
      position: absolute;
      top: 0;
      transition: transform 0.75s, opacity 0.75s;
    }
    &:hover {
      .item1 {
        transform: rotateY(0deg);
        opacity: 1;
      }
      .item2 {
        opacity: 0;
        transform: rotateY(180deg);
      }
    }
  }
  transform-style: preserve-3d;
  .card2 {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    .card2_box {
      border: 1px solid red;
      width: 300px;
      margin-top: 10px;
      transform-style: preserve-3d;
      transition: transform 0.75s;
      .item {
        width: 300px;
        border-radius: 10px;
        text-align: center;
        backface-visibility: hidden; //影藏被旋转元素的背面
      }
      .item1 {
        transform: rotateY(-180deg);
      }
      .item2 {
        position: absolute;
        top: 0;
      }
    }
    &:hover {
      .card2_box {
        transform: rotateY(180deg);
      }
    }
  }

  .layout {
    background-color: #ccc;
    padding:10px;
    .row {
      display: flex;
      .col {
        flex: 1;
        height: 200px;
        background-color: aliceblue;
        &:nth-child(n + 2) {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>